<template>
	<view class="container">
		<view class="content">
			<view v-for="(item,index) in carList" :key="item.id" class="item">
				<checkbox-group @change="handleItemCheck($event,item.id)">
					<checkbox :value="true" :checked="item.checked" />
				</checkbox-group>			
				<view class="imageWrap">
					<image :src="item.image" mode="" class="image"></image>
				</view>
				<view class="itemDetail">
					<view class="title">{{item.title}}</view>
					<view class="price">¥ {{item.price}}</view>
					<view class="buttonwrap">
						<button size="mini" class="btn" @click="handleSub(item.id)" :disabled="item.count === 1">-</button>
						<text class="count">{{item.count}}</text>
						<button size="mini" class="btn" @click="handleAdd(item.id)">+</button>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="">
				<checkbox-group @change="handleAllCheck">
				<checkbox value="true" :checked="totalCheck" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="rightWrap">
				<text class="totalPrice">总价：¥ {{totalPrice}}</text>
				<button>提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			// 将store中state数据注册
			...mapState(['carList']),
			// 将getters进行注册
			...mapGetters(['totalPrice', 'totalCheck'])
		},
		methods: {
			// 将mutation方法进行注册
			...mapMutations(['addCount','subCount','checkItem', 'checkAll']),
			handleSub(id) {
				this.subCount({id})
			},
			handleAdd(id) {
				this.addCount({id})
			},
			handleItemCheck(e, id) {
				const checked = !!e.detail.value.length;
				this.checkItem({
					id,
					checked
				})
			},
			handleAllCheck(e) {
				const checked = !!e.detail.value.length;
				this.checkAll({checked})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		.content {
			flex: 1;
		}
		.footer {
			height: 100rpx;
			// background: #ccc;
			width: 100%;
			border-top: 1rpx solid #666;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 40rpx;
			justify-content: space-between;
			box-sizing: border-box;
			.rightWrap {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.totalPrice {
				color: #ff5000;
				font-size: 34rpx;
			}
		}
	}
	.item {
		display: flex;
		height: 200rpx;
		margin: 20rpx auto 20rpx;
		width: 702rpx;
		flex-direction: row;
		.imageWrap {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			overflow: hidden;
			flex-shrink: 0;
			.image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		.itemDetail {
			margin-left: 20rpx;
			.title {
				font-size: 34rpx;
			}
			.price {
				font-size: 28rpx;
				color: $uni-color-success;
			}
		}
		.buttonwrap {
			display: flex;
			flex-direction: row;
			.btn {
				margin: 0;
				height: 60rpx;
			}
			.count {
				margin: 20rpx;
			}
		}
	}
</style>
